<template>
	<view>
		<uNavbar :title="titles"></uNavbar>
		<view class="search flex_dq">
			<image src="../../static/icon/i_ss.png" mode="aspectFill"""></image>
			<input type="text" placeholder-style="font-size:14px" v-model.trim="search" placeholder="请输入商品名称"
				@confirm="isSearch" />
		</view>

<!-- 		<view class="kbx">
			<view class=" circle" @click="openBox">
				<view class="circle_left ab" :style="renderLeftRate(blindboxInfo.speed_proportion)"></view>
				<view class="circle_right ab" :style="renderRightRate(blindboxInfo.speed_proportion)"></view>
				<view class="circle_text flex_c">
					<image class="kbx_img" src="../../static/icon/bx2.png" mode="aspectFill"></image>
					<text class="kbx_text">{{blindboxInfo.surplus_blind_number}}</text>
				</view>
			</view>
		</view> -->

		<view class="shopp">
			<view class="tips " v-if="shopState == 2">
				<view class="tips_l">
					<image src="../../static/icon/i_vip.png" mode="aspectFill"></image>
				</view>
				<text>{{fuhuaText}}</text>
			</view>
			<view class="tips" v-else-if="shopState == 4" >
				<text>{{daoText}}</text>
			</view>
			<view class="tips"  v-else-if="shopState == 5" >
				<text>{{integralText}}</text>
			</view>
			<view >
				<view class="commodity ">
					<view class="commodity_sell flex_Z" v-for="(item,index) in productList" :key="index"
						@click="goDetails(item.id)">
						<image :src="item.images" mode="aspectFill"></image>
						<text>{{item.name}}</text>
						<view class="gives flex_c" v-if="item.type ==5">
							<text class="">赠送</text>
							<image class="gives_img" src="../../static/image/fhyb.png" mode=""></image>
							<text>{{item.balance_hf || 0}}</text>
						</view>
						<view class="sign_box ">
							<view class="money_a flex_dq">
								<text class="fracture_txt" v-if="item.discount">折</text>
								<image v-if="item.is_hold" src="../../static/icon/i_vip.png" mode=""></image>
								<text>￥{{item.present_price}}</text>
								<text v-if="item.hasoption" style="font-size: 18rpx;margin-left: 4rpx;">起</text>
							</view>
							<view class="fracture flex_dq" v-if="item.discount">
								<text>￥{{item.discount_price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="productList" :status="status"></noDatas>
	</view>
</template>

<script>
	import {
		shopGoods,
		blindboxSummary,config
	} from "../../api/shopp.js";
	export default {
		data() {
			return {
				search: '',
				page: 1,
				size: 10,
				boxShow: false,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				titles:'',
				daoText:'',
				integralText:'',
				fuhuaText:'',
				shopState:2,
				bannerList: [], //轮播图
				productList: [],
				blindboxInfo: {}
			}
		},
		onLoad(e) {
			console.log(e);
			this.isConfig()
			this.shopState = e.state
			if(this.shopState == 2){
				this.titles = '孵化品牌区'
			}else if(this.shopState == 4){
				this.titles = 'DAO贡献区'
			}else if(this.shopState == 5){
				this.titles = '购物送元宝'
			}
		},
		onShow() {
			if (this.status != 'nomore') {
				this.page = 1
				this.productList = []
				this.initList()
			}
		},
		methods: {
			renderRightRate(rate) {
				if (rate < 50) {
					return 'transform: rotate(' + 3.6 * rate + 'deg);';
				} else {
					return 'transform: rotate(0);border-color: #FF4018;';
				}
			},
			renderLeftRate(rate) {
				if (rate >= 50) {
					return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';
				}
			},
			openBox() {
				this.boxShow = true
			},
			isConfig() {
				config({}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.fuhuaText = res.data.hatch_goods_index_text
						this.daoText = res.data.ddao_contribution_value
						this.integralText = res.data.give_integral_text
					}
				})
			},
			openBabyBox() {
				blindboxSummary({}).then(res => {
					console.log('11111', res)
					if (res.code == 1) {
						this.blindboxInfo = res.data
					}
				})
			},
			// 统一跳转
			allJump(e) {
				let {
					url
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},
			// 去详情
			goDetails(id) {
				uni.navigateTo({
					url: '/pagesMy/shoppingCenter/shopDetails?id=' + id
				})
			},
			// 初始化列表
			initList() {
				let data = {
					page: this.page,
					type: this.shopState,
					search_name: this.search,
					cateogry_id: '',
					is_recommend: '',
				}
				shopGoods(data).then(res => {
					console.log('11111', res)
					if (res.code == 1) {
						let list = res.data.data;
						this.productList = this.page == 1 ? list : this.productList.concat(list);
						console.log(this.productList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			isSearch() {
				this.page = 1
				this.productList = []
				this.initList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1,
					that.search = '',
					that.productList = [],
					that.initList()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.search {
		position: relative;
		width: 690rpx;
		height: 68rpx;
		background: #ffffff;
		margin: 30rpx auto;
		border-radius: 40rpx;
	}

	.search>image {
		width: 40rpx;
		height: 40rpx;
		margin: 0 40rpx 0 26rpx;
	}

	.search::before {
		content: '';
		position: absolute;
		top: 18rpx;
		left: 80rpx;
		transform: translateX(-50%);
		height: 36rpx;
		width: 2rpx;
		background: #E5E5E5;
	}

	.search>input {
		color: #A6A5AF;
	}

	.tips {
		display: flex;
	}
	.tips>text{
		font-size: 28rpx;
	}

	.tips_l {
		width: 50rpx;
	}

	.tips_l>image {
		width: 44rpx;
		height: 40rpx;
		margin-right: 10rpx;
		margin-top: 6rpx;
	}

	.brands {
		position: relative;
		width: 690rpx;
		height: 276rpx;
		margin: 92rpx auto 0;
		border-radius: 40rpx 0 20rpx 20rpx;
		background: #8C7554;
	}

	.shopp {
		width: 92%;
		margin: 40rpx auto 30rpx;
	}

	.bg_circular {
		position: absolute;
		top: -18rpx;
		left: 0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		z-index: 2;
		background: linear-gradient(180deg, #BA9B7090, #BA9B7050);
	}

	.bg_circular_a {
		position: absolute;
		top: -18rpx;
		left: 0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		z-index: 2;
		background: linear-gradient(180deg, #BA9B7090, #BA9B7050);
	}

	.tips {
		width: 100%;
		font-size: 30rpx;
		background: #F2F2F2;
		color: #A68A64;
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
	}

	.commodity_box {
		width: 92%;
		margin: 50rpx auto 30rpx;
		position: relative;
	}

	.commodity {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin-top: 28rpx;
	}

	.commodity {
		z-index: 9;
		position: relative;
	}

	.commodity_sell {
		position: relative;
		width: 330rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 12rpx 0;
		padding-bottom: 20rpx;
	}

	.commodity_sell>image {
		width: 100%;
		height: 330rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.commodity_sell>text {
		margin: 16rpx;
		font-size: 32rpx;
		color: #3D3D3D;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.gives{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		background: #00000080 !important;
		font-size: 20rpx !important;
		color: #ffffff !important;
		text-align: center;
		padding: 10rpx 10rpx;
		border-radius: 0 20rpx 0 0;
		z-index: 10;
	}
	.gives_img{
		width: 26rpx;
		height: 18rpx;
		margin: 0 4rpx;
	}

	.money_a {
		color: #3D3D3D;
		font-size: 32rpx;
		font-family: iconfont;
		margin-right: 10rpx;
	}

	.money_a>image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}
	.fracture_txt{
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		background: #A68A64;
		border-radius:  10rpx;
		color: #ffffff;
		font-size: 24rpx;
		background: #A68A64;
		padding: 4rpx 6rpx;
	}
	.fracture{
		font-size: 24rpx;
		color: #999999;
		text-decoration-line: line-through;
	}
	.sign_box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 0 10rpx;
	}

	.kbx {
		position: fixed;
		top: 270rpx;
		right: 30rpx;
		z-index: 2;
		// width: 92rpx;
		// height: 92rpx;
		background: #00000050;
		border-radius: 50%;
	}

	.kbx_img {
		margin-top: 30rpx;
		width: 68rpx;
		height: 58rpx;
	}

	.kbx_text {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 28rpx;
		background: #F95F43;
		color: #ffffff;
		padding: 4rpx 16rpx;
		border-radius: 40rpx;
	}
	.circle {
		width: 60px;
		height: 60px;
		position: relative;
		border-radius: 50%;
		box-shadow: inset 0 0 0 5px #FF4018;
		.ab {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	
		&_left {
			border: 5px solid #546063;
			border-radius: 50%;
			/* 更正！！！
	        之前使用clip是可以正常的，但现在clip被弃用，推荐使用clip-path，但是这个属性和clip-path有些微的不同
	        使用clip-path应该更改为： clip-path: inset(0 40px 0 0);
	        */
			// clip: rect(0, 40px, 80px, 0);
			 clip-path: inset(0 30px 0 0);
		}
	
		&_right {
			border: 5px solid #546063;
			border-radius: 50%;
			// 使用clip-path应该更改为： clip-path: inset(0 0 0 40px);
			// clip: rect(0, 80px, 80px, 40px);
			clip-path: inset(0 0 0 30px);
		}
	
		&_text {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;
	
			.name {
				margin-bottom: 4px;
			}
		}
	}

	/deep/.u-line-progress__line {
		background: linear-gradient(270deg, #D7BA93 0%, #AB8E68 100%);
	}
</style>